<template>
  <div id="withdrawDeposit">
    <Header :showheaderLeft="false" :showBack="true" :isTitle="true" :showTitle="true"></Header>
    <div class="rootMain">
      <div class="select-coin">
        <h4>币种</h4>
        <div @click="showWithdrawal = true;">
          <span>{{coin}}</span>
          <van-icon name="arrow" />
        </div>
      </div>
      <div class="coin-type">
        <div class="point">
          <span class="lg-point blue-point"></span>
          <span></span>
          <span></span>
          <span></span>
          <span class="lg-point"></span>
        </div>
        <div class="coin-option">
          <div>
            <b>从</b>
            <span>{{coinType}}</span>
          </div>
          <div>
            <b>到</b>
            <span>{{coinType2}}</span>
          </div>
        </div>
      </div>
      <div class="num-coin">
        <h4>划转数量</h4>
        <div class="num-input">
          <div>
            <input type="text" placeholder="请输入划转数量" v-model="num" @keyup="keyUp" />
            <b>{{coin}}</b>
          </div>
          <span @click="num=amount">全部</span>
        </div>
      </div>
      <p>{{coinType}} {{amount}} {{coin}}</p>
      <div class="tips">只有资产划转到对应的账户才可以交易；账户只能单向划转，转出后不可转回。</div>
      <div class="btn" @click="drawal">划转</div>
    </div>
    <van-popup
      v-model="showWithdrawal"
      position="bottom"
      round
      :style="{ height: '40%' }"
      class="withdrawalPop"
    >
      <div class="pop-title">选择币种</div>
      <div class="pop-con">
        <div class="list">
          <div class="item" @click="selectCoin(1)">VC</div>
          <div class="item" @click="selectCoin(2)">CNN</div>
        </div>
      </div>
    </van-popup>
    <RootLoading v-show="rootLoading"></RootLoading>
  </div>
</template>
<script>
import Services from "@/service/index.js";
import { mapMutations, mapState } from "vuex";
import Header from "@/components/header";
import { Toast } from "vant";
import RootLoading from "@/components/rootLoading";
export default {
  data() {
    return {
      loginToken: "",
      userObj: {},
      rootLoading: false,
      type: 1,//1vc2cnn
      coin: "VC",
      showWithdrawal: false,
      amount: "0.00",
      num: "",
      coinType: "",
      coinType2: ""
    };
  },
  created() {
    this.changeTitle(this.$t("m.transfer"));
    this.loginToken = localStorage.getItem("token")
      ? localStorage.getItem("token")
      : "";
    this.userObj = localStorage.getItem("userObj")
      ? JSON.parse(localStorage.getItem("userObj"))
      : "";
    this.type = this.$route.query.type;
    if (this.type == 1) {
      this.coin = "VC";
      this.coinType = "理财资产";
      this.coinType2 = "可提资产";
    } else {
      this.coin = "CNN";
      this.coinType = "可提资产";
      this.coinType2 = "可用余额";
    }
    this.getUser();
  },
  components: { Header, RootLoading },
  computed: {
    
  },
  methods: {
    ...mapMutations(["changeTitle", "changetabbarIndex"]),
    keyUp() {
      this.num = this.num.replace(/[^\d.]/g, ""); //清除“数字”和“.”以外的字符
      this.num = this.num.replace(/^\./g, ""); //验证第一个字符是数字而不是.
      this.num = this.num.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
      this.num = this.num
        .replace(/^0*/g,'')
        .replace(".", "$#$")
        .replace(/\./g, "")
        .replace("$#$", ".");
      this.num = this.num.replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3"); //只能输入两个小数
    },
    getUser() {
      Services.getUser({
        token: this.loginToken,
        lang: localStorage.getItem("language")
      }).then(res => {
        if (res.code == "0000") {
          this.userObj = res.user;
          localStorage.setItem("userObj", JSON.stringify(this.userObj));
          if (this.type == 1) {//理财2可提
            this.amount = this.userObj.vcWithdrawAmount.toFixed(2);
          } else {
            this.amount = this.userObj.cnnWithdrawAmount.toFixed(2);
          }
        } else {
          Toast(res.msg);
        }
      });
    },
    selectCoin(type) {
      this.num = "";
      this.type=type;
      if (type == 1) {
        this.showWithdrawal = false;
        this.coin = "VC";
        this.coinType = "理财资产";
        this.coinType2 = "可提资产";
        this.amount = this.userObj.vcWithdrawAmount.toFixed(2);
      } else {
        this.showWithdrawal = false;
        this.coin = "CNN";
        this.coinType = "可提资产";
        this.coinType2 = "可用余额";
        this.amount = this.userObj.cnnWithdrawAmount.toFixed(2);
      }
    },
    drawal() {
      let fromType ,toType;
      if (this.num == "") {
        Toast("请输入划转数量");
        return;
      }
      console.log(this.num, this.amount);
      if (this.num * 1 > this.amount * 1) {
        Toast("可用余额不足");
        return;
      }
      if (this.type == 1) {
         fromType = 3;
         toType=2;
        if (this.num < 1000) {
          Toast("理财资产最低划转金额为1000");
          return;
        }
      } else {
        fromType = 5;
        toType=1;
      }
      Services.transfer({
        token: this.loginToken,
        amount: this.num,
        fromType: fromType,
        toType:toType
      }).then(res => {
        console.log(res);
        if (res.code == "0000") {
          Toast("划转成功");
          this.getUser();
        } else {
          Toast(res.msg);
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped type="text/scss">
#withdrawDeposit {
  height: 100%;
  // 提币弹窗
  .withdrawalPop {
    .pop-title {
      height: 1rem;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 0.26rem;
      font-weight: bold;
      border-bottom: 0.04rem solid #ececec;
    }
    .pop-con {
      background: #fefefe;
      height: calc(100% - 1.04rem);
      .list {
        padding: 0.1rem 0.5rem;
        .item {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 1rem;
          font-size: 0.26rem;
          border-bottom: 1px solid #f3f3f3;
        }
      }
    }
  }
  .rootMain {
    height: calc(100% - 0.88rem);
    top: 0.88rem;
    overflow: auto;
    .topImg {
      height: 5.2rem;
      padding: 0;
      position: relative;
      > p {
        position: absolute;
        bottom: 0.5rem;
        margin: 0;
      }
    }
  }
  .select-coin {
    margin-top: 0.3rem;
    padding: 0 0 0 0.3rem;
    h4 {
      font-size: 0.24rem;
    }
    div {
      width: 100%;
      height: 1rem;
      position: relative;
      border-bottom: 1px solid #eee;
      span {
        display: flex;
        align-items: center;
        height: 100%;
        font-size: 0.3rem;
      }
      i {
        position: absolute;
        top: 0.35rem;
        right: 0.2rem;
      }
    }
  }
  .coin-type {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 95%;
    margin: 0.5rem auto;
    padding: 0.1rem 0.3rem;
    border: 1px solid #eee;
    border-radius: 0.14rem;
    .point {
      display: flex;
      justify-content: space-around;
      align-items: center;
      flex-direction: column;
      height: 1.1rem;
      span {
        width: 3px;
        height: 3px;
        background: #999;
        border-radius: 50%;
        &.lg-point {
          width: 5px;
          height: 5px;
          background: #fd6262;
        }
        &.blue-point {
          background: #1882d4;
        }
      }
    }
    .coin-option {
      margin-left: 0.3rem;
      flex: 1;
      div {
        height: 0.85rem;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #eee;
        b {
          color: #999;
          margin-right: 0.3rem;
        }
        &:last-child {
          border-bottom: none;
        }
      }
    }
  }
  .num-coin {
    margin-top: 0.3rem;
    padding: 0 0 0 0.3rem;
    h4 {
      font-size: 0.24rem;
    }
    .num-input {
      width: 100%;
      height: 1rem;
      position: relative;
      border-bottom: 1px solid #eee;
      display: flex;
      align-items: center;
      div {
        flex: 1;
        height: 0.75rem;
        border-right: 1px solid #eee;
        position: relative;
        input {
          border: none;
          width: 100%;
          height: 100%;
          background: transparent;
          margin: 0;
          padding: 0;
          ::-webkit-input-placeholder {
            color: #c5cfd5;
          }
        }
        b {
          padding-right: 0.3rem;
          top: 0;
          right: 0;
          height: 100%;
          display: flex;
          align-items: center;
          position: absolute;
        }
      }
      span {
        width: 1.5rem;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 0.3rem;
      }
    }
  }
  p {
    padding: 0.1rem 0.3rem;
    font-size: 0.22rem;
    color: #c5cfd5;
  }
  .tips {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 95%;
    padding: 0.3rem;
    margin: 0.5rem auto 1rem;
    background: #f1f1f1;
    border-radius: 0.14rem;
    height: 1.5rem;
  }
  .btn {
    width: 95%;
    border-radius: 0;
    background: linear-gradient(to right, #43434e, #727181);
  }
}
</style>